<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!--市级别的事项查询   杨卓霖-->
<head>
    <meta charset="UTF-8">
    <title>市级事项查询</title>
    <!-- load css -->
    <link rel="stylesheet" type="text/css" href="myconfig/layui/css/layui.css" media="all">
    <!-- 加载js文件-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="myconfig/layui/layui.js"></script>
    <style>
        #demoTable{
            text-align: center;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<div class="demoTable" id="demoTable">
    <h1>市级事项管理</h1>
    <div class="layui-inline">
        事项状态:
        <div class="layui-form">
            <select name="sx_status" lay-verify="" id="sx_status">
                <option value="">请选择...</option>

            </select>
        </div>
        <div style="height: 20px">

        </div>
        立项人:
        <div class="layui-form">
            <select name="sx_founder_id" lay-verify="" id="founder">
                <option value="">请选择...</option>
            </select>
        </div>
        <div style="height: 20px">

        </div>
        紧急程度:
        <div class="layui-form">
            <select name="urgenry_id" lay-verify="" id="sx_urgenry">
                <option value="">请选择...</option>
            </select>
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>
</div>

<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>

<script th:inline="none">
    layui.use('table', function(){
        var table = layui.table;


        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            ,url: 'sx/cityQuery'
            ,cols: [[
                {checkbox: true, fixed: true},
                {field:'itemId', title: 'ID',  sort: true, fixed: true},
                {field:'itemName', title: '事项名称'},
                {field:'itemFounder', title: '立项人', templet:'<div>{{d.itemFounder.userName}}</div>'},
                {field:'itemTime', title: '立项时间',sort: true},
                {field:'itemContent', title: '内容'}
            ]]
            ,id: 'testReload'
            ,page: true
            ,height: 315
        });

        var $ = layui.$, active = {
            reload: function(){
                // var demoReload = $('#demoReload');
                var sx_status=$("#sx_status option:selected").val();
                var sx_urgeny=$("#sx_urgenry option:selected").val();
                var founder =$("#founder option:selected").val();
                //   alert(sx_status);
                //   alert(sx_urgeny);
                //   alert(founder);
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    method:"post",
                    where: {
                        checkStatusId :sx_status,
                        urgenryId :sx_urgeny,
                        userId :founder
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });

    var $;
    var element;
    var form;
    layui.use(['layer','element','jquery','laydate','form'],function () {
        form =layui.form;
        layer = layui.layer;
        $ = layui.jquery;
        element = layui.element;
        laydate = layui.laydate;
        findFounder();
        findUrgenry();
        findStatus();
    })

    function findFounder() {
        $.ajax({
            url:"sx/findFounder",
            type:"post",
            datatype:"json",
            success:function(data){
                var  founder = document.getElementById("founder");
                for (var i =0;i<data.length;i++){
                    //  alert(data[2].user.user_id);
                    var option = document.createElement("option");
                    option.setAttribute("value",data[i].userId);
                    option.innerText = data[i].userName;
                    founder.appendChild(option);
                    layui.form.render('select');
                }
            }
        })
    }

    function findUrgenry() {
        $.ajax({
            url:"sx/findUrgenry",
            type:"post",
            datatype:"json",
            success:function (data) {
                var sx_urgenry = document.getElementById("sx_urgenry");
                for (var i = 0;i<data.length;i++){
                    var option =document.createElement("option");
                    option.setAttribute("value",data[i].urgenryId);
                    option.innerText=data[i].urgenryName;
                    sx_urgenry.appendChild(option);
                    layui.form.render('select');
                }
            }
        })
    }

    function findStatus() {
        $.ajax({
            url:"sx/findStatue",
            type:"post",
            datatype:"json",
            success:function (data) {
                var sx_status = document.getElementById("sx_status");
                for (var i =0;i<data.length;i++){
                    var option =document.createElement("option");
                    option.setAttribute("value",data[i].checkStatusId);
                    option.innerText = data[i].statusName;
                    sx_status.appendChild(option);
                    layui.form.render('select');
                }
            }
        })
    }
</script>
</body>
</html>